<template>
    <div>
        <div v-if="state.file" class="file-container">
            <div class="file-name">
                <Files class="file" />
                {{ state.file.name }}
            </div>

            <CloseBold class="close" @click="cancelFile()" />
        </div>
        <div class="sc-user-input">
            <div class="ticket-btn">
                <el-button round class="btn" @click="emits('toTicket')">
                    Create&Check Ticket
                </el-button>
            </div>

            <div class="input--buttons">
                <EmojiIcon :on-emoji-picked="handleEmojiPicked" />

                <FileIcons :on-change="handleFileSubmit" />
            </div>

            <el-button
                class="send-btn"
                type="primary"
                @click.prevent="submitText"
                :disabled="sendDisabled"
            >
                Send
            </el-button>

            <textarea
                class="input"
                v-model="state.content"
                :disabled="disabled"
                @keydown.enter.exact.prevent="submitText"
                @keydown.tab.exact.prevent="submitText"
                :maxlength="maxLength"
                show-word-limit
            ></textarea>
        </div>
    </div>
</template>

<script setup>
import EmojiIcon from './icons/EmojiIcon.vue'
import FileIcons from './icons/FileIcons.vue'
import { reactive, inject, computed } from 'vue'
import { CloseBold, Files } from '@element-plus/icons-vue'

const props = defineProps({
    maxLength: {
        type: Number,
        required: true,
    },
})

const emits = defineEmits(['sendMessage', 'toTicket'])

const inputDisabledData = inject('inputDisabled')

const disabled = computed(() => {
    return inputDisabledData().disabled.value
})

const sendDisabled = computed(() => {
    const value = state.content.trim()

    if (value !== '') return false

    if (state.file) return false

    return true
})

const state = reactive({
    file: null,
    prevSelectionRange: null,
    content: '',
})

const cancelFile = () => {
    state.file = null
}

const submitText = (event) => {
    if (!sendDisabled.value) {
        const text = state.content
        const file = state.file

        if (file) {
            emits('sendMessage', {
                author: 'me',
                type: 'file',
                data: { file },
            })
        } else {
            emits('sendMessage', {
                author: 'me',
                type: 'text',
                data: { text },
            })
        }

        state.content = ''
        state.file = null
    }
}

const handleEmojiPicked = (emoji) => {
    emits('sendMessage', {
        author: 'me',
        type: 'emoji',
        data: { emoji },
    })
}

const handleFileSubmit = (file) => {
    state.file = file
}
</script>

<style scoped lang="scss">
.file-container {
    background-color: #ff8217;
    border-top-left-radius: 10px;
    padding: 15px 20px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 999;
    font-size: 14px;

    .file-name {
        display: flex;
        align-items: center;
        .file {
            width: 16px;
            height: 16px;
            margin-right: 12px;
        }
    }
    .close {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
}

.sc-user-input {
    padding: 8px 18px;
    min-height: 136px;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;

    .ticket-btn {
        height: 36px;
        position: absolute;
        left: 0;
        right: 20px;
        top: -35px;
        padding-left: 19px;
        background: rgb(248, 248, 248);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        z-index: 10;

        .btn {
            height: 28px !important;
            border-color: #eaeaea !important;
        }
    }

    .mark {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba($color: #000000, $alpha: 0.1);
        cursor: not-allowed;
        z-index: 99;
    }

    .input--buttons {
        width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .input {
        flex: 1;
        border: none;
        overflow-y: auto;
        width: 100%;
        line-height: 20px;
        outline: 0;
        resize: none;
        box-sizing: content-box;
        font-size: 16px;
        border: none;
        box-sizing: border-box;
        color: #0a0a0a;
        caret-color: #ff8217;

        &:disabled {
            background: #fff !important;
        }
    }

    .send-btn {
        position: absolute;
        right: 32px;
        bottom: 32px;
    }
}
</style>
